import React,{useState,useEffect} from "react";
import MyHeader from "../../components/header/MyHeader";
import { useSelector } from "react-redux";
import style from "./style.module.scss";
import api from '../../api/index'
import LoadMore from "../../components/loadMore/LoadMore";
import { Rate,TextArea } from 'antd-mobile'
export default function Comment() {
  const username = useSelector((store) => store.user.username);
  const cityname = useSelector((store) => store.city.cityname);
  //定义列表容器  
  const [list,setList] = useState([])
  const [page,setPage] = useState(0)
  //定义文本框
  const [value,setValue]=useState('')
  const [star,setStar] = useState(0)
  //定义一个标识变量   current值=-1  不存在id 没有id和-1相等 控制评论输入框 隐藏  current ==ele.id
  const [current,setCurrent] = useState(-1)
  //点击星星事件-------------------
  function getStar(val){
    console.log(val);
    setStar(val)
  }
 
  function getCommit(id,index){
        console.log(id,value,star,index);
        if(value =='' || star==0){
            alert('请评论后提交')
            return;
        }
        //隐藏：修改list属性 
        list[index].iscommit = true;
        //视图同步修改、
        setList([...list])
        //修改current
        setCurrent(-1)
        //清空输入值
        setValue('')
  }
  //取消-----------------
  function getClose(){
    //修改current
    setCurrent(-1)
     //清空输入值
     setValue('')
  }

    //开关
    let flag = true;
  //生命周期函数 
  useEffect(()=>{
    getComment(page)
  },[])
  //请求评论内容-----------------------
  async function getComment(page){
    let res = await api.getShopComment({ city:cityname,user:username  })
    console.log(res.data);
    setList([...list,...res.data.list])
    flag=true;
    //页码
    setPage(page+1)
  }
  return (
    <div>
      <MyHeader>房源评论</MyHeader>
      <p>用户名称：{username} </p>
      <p>房源城市：{cityname} </p>
      {/* 评论列表展示 */}
      <ul className={style.list}>
        {
            list.map((ele,index)=>{
                return  <li key={index} >
                        <div className={style["shoplist-item"]}>
                            <img className={style["shop-img"]} src={ele.img} alt="" />
                                <div className={style["shoplist-info"]}>
                                <p>标题：{ele.title}</p>
                                <p>户型：{ele.huxing}</p>
                                <p>价格: {ele.price}/月</p>
                                </div>
                                {/* 评论 */}
                                <div className={style.ping}>
                                    {
                                        ele.iscommit?<div className={style.gray}>已评论</div>:<div onClick={()=>setCurrent(ele.id)}>评论</div>
                                    }
                                </div>

                        </div>
                             {/* 评论信息 怎么显示： 点击的id === id标识?xx:00*/}
                             {
                                current==ele.id?<div className={style.comment}>
                                                    <textarea placeholder='请输入内容' rows={5} cols={30}  value={value} onChange={e => setValue(e.target.value)}></textarea>
                                                    <br />
                                                        <div>星星： <Rate onChange={getStar}  /></div>
                                                        <br />
                                                        <button onClick={getCommit.bind(null,ele.id,index)}>提交</button>
                                                        <button onClick={getClose}>取消</button>
                                                </div>:''
                             }
                            
                        </li>
            })
        }
      </ul>

     

      {/* 加载更多数据 */}
      <LoadMore getData={getComment} page={page}/>

    </div>
  );
}
